﻿<template>
  <div>
    <!-- 标题栏 -->
    <NavBar
      :title="$route.meta.title"
      :rightBtn="rightBtn"
      @handleIcon="hanldleRight"
    >
    </NavBar>
    <van-search
      v-model="queryParam.keyword"
      placeholder="关键字"
      @search="getDataList"
    >
      <template #left>
        <van-dropdown-menu>
          <van-dropdown-item v-model="queryParam.condition" :options="option" />
        </van-dropdown-menu>
      </template>
    </van-search>
    <van-pull-refresh v-model="loading" @refresh="getDataList">
      <van-list v-model="loading" :finished="!loading">
        <van-swipe-cell v-for="item in data" :key="item.Id">
          <van-cell @click="handleEdit(item.Id)" icon="label-o">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span
                >{{ item.DefFormName }}-{{ item.Status | statusFilter }}</span
              >
            </template>
            <template #label>
              <span>{{ item.Text }}</span>
            </template>
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          </van-cell>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              style="height:100%; margin-left:1px"
              @click="handleDelete([item.Id])"
            />
          </template>
        </van-swipe-cell>
      </van-list>
    </van-pull-refresh>
    <van-pagination
      v-model="pagination.current"
      :total-items="pagination.total"
      :show-page-size="pagination.pageSize"
      @change="getDataList"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>

    <edit-form ref="editForm" :afterSubmit="getDataList"></edit-form>

    <van-popup v-model="showfilter" position="bottom">
      <van-radio-group v-model="status" @change="getDataList">
        <van-cell-group>
          <van-cell title="待审批" clickable @click="status = 'processing'">
            <template #right-icon>
              <van-radio name="processing" />
            </template>
          </van-cell>
          <van-cell title="等待中" clickable @click="status = 'waiting'">
            <template #right-icon>
              <van-radio name="waiting" />
            </template>
          </van-cell>
          <van-cell title="审批过" clickable @click="status = 'finish'">
            <template #right-icon>
              <van-radio name="finish" />
            </template>
          </van-cell>
          <van-cell title="创建的" clickable @click="status = 'created'">
            <template #right-icon>
              <van-radio name="created" />
            </template>
          </van-cell>
          <van-cell title="全部" clickable @click="status = 'all'">
            <template #right-icon>
              <van-radio name="all" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
  </div>
</template>

<script>
import {
  OA_UserForm_GetDataList,
  OA_UserForm_DeleteData
} from "@/api/OA_Manage/OA_UserForm";
import NavBar from "@/components/NavBar";
import EditForm from "./EditForm";
import { mapGetters } from "vuex";

const statusMap = {
  0: {
    status: "default",
    text: "未开始",
    stepstatus: "wait"
  },
  1: {
    status: "processing",
    text: "审批中",
    stepstatus: "process"
  },
  2: {
    status: "error",
    text: "驳回上一级",
    stepstatus: "error"
  },
  3: {
    status: "error",
    text: "驳回重提",
    stepstatus: "error"
  },
  4: {
    status: "error",
    text: "否决",
    stepstatus: "error"
  },
  5: {
    status: "warning",
    text: "废弃",
    stepstatus: "error"
  },
  6: {
    status: "warning",
    text: "挂起",
    stepstatus: "wait"
  },
  7: {
    status: "processing",
    text: "恢复",
    stepstatus: "process"
  },
  99: {
    status: "processing",
    text: "部分审批",
    stepstatus: "process"
  },
  100: {
    status: "success",
    text: "通过",
    stepstatus: "finish"
  }
};

export default {
  components: {
    NavBar,
    EditForm
  },
  mounted() {
    var status = this.$route.params.status;
    if (status) {
      this.status = status;
    }
    this.getDataList();
    this.rightBtn.number++;
    this.rightBtn.iconName.unshift("filter-o");
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text;
    },
    statusTypeFilter(type) {
      return statusMap[type].status;
    }
  },
  data() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: "Id", order: "asc" },
      loading: false,
      queryParam: {},
      visible: false,
      selectedRowKeys: [],
      rightBtn: {
        number: 0,
        iconName: []
      },
      option: [
        { text: "分类", value: "Type" },
        { text: "标题", value: "DefFormName" },
        { text: "摘要", value: "Text" },
        { text: "申请人", value: "ApplicantUser" },
        { text: "审批人", value: "UserNames" }
      ],
      showfilter: false,
      status: "processing"
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapGetters(["hasPerm"])
  },
  methods: {
    getDataList() {
      this.selectedRowKeys = [];
      this.queryParam.userId =
        this.status === "processing" ? this.userInfo.Id : "";
      this.queryParam.applicantUserId =
        this.status === "waiting" ? this.userInfo.Id : "";
      this.queryParam.alreadyUserIds =
        this.status === "finish" ? this.userInfo.Id : "";
      this.queryParam.creatorId =
        this.status === "created" ? this.userInfo.Id : "";

      this.loading = true;
      OA_UserForm_GetDataList({
        PageIndex: this.pagination.current,
        PageRows: this.pagination.pageSize,
        SortField: this.sorter.field || "Id",
        SortType: this.sorter.order,
        Search: this.queryParam,
        ...this.filters
      }).then(resJson => {
        this.loading = false;
        this.data = resJson.Data;
        const pagination = { ...this.pagination };
        pagination.total = resJson.Total;
        this.pagination = pagination;
      });
    },
    hanldleRight(item) {
      this.showfilter = true;
    },
    handleEdit(id) {
      this.$refs.editForm.openForm(id);
    },
    handleDelete(ids) {
      var thisObj = this;

      this.$dialog
        .confirm({
          title: "确认删除吗?"
        })
        .then(() => {
          // on confirm
          OA_UserForm_DeleteData(ids).then(resJson => {
            if (resJson.Success) {
              this.$toast.success("操作成功");
              this.getDataList();
            } else {
              this.$toast.fail(resJson.Msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="less">
.van-dropdown-menu {
  .van-dropdown-menu__bar {
    height: 33px;
    min-width: 80px;
  }
}
</style>
